<script lang="ts" setup>
import { ref } from "vue";
import { toast } from "../../components/popup/popup";
import {goManage} from "../../tools/go"
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import UniPopupDialog from "../../uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue";
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import {getUserPostByNoPublic, PostFail, PostSuccess} from "../../api/neighborhood/postManage";
import {baseUrl} from "../../api/http";
import {getUserId} from "../../store";

const pendingCount = ref(128);
const confirmPopup = ref();
const customTag = ref("");
const dialogType = ref("info");
const dialogTitle = ref("");
const dialogContent = ref("");
const selectedTags = ref<[string]>([]);


const predefinedTags = ref([
  { id: 1, name: "优质内容" },
  { id: 2, name: "风景" },
  { id: 3, name: "亲子" },
  { id: 4, name: "生活记录" },
  { id: 5, name: "摄影" },
  { id: 6, name: "春天" },
  { id: 7, name: "情感" },
]);



const toggleTag = (tagName: string) => {
  const index = selectedTags.value.indexOf(tagName);
  if (index === -1) {
    // 如果标签未选中，则添加到选中列表
    selectedTags.value.push(tagName);
  } else {
    // 如果标签已选中，则从选中列表中移除
    selectedTags.value.splice(index, 1);
  }
};

const addCustomTag = () => {
  predefinedTags.value.push({
    id: predefinedTags.value.length,
    name: customTag.value
  })
  selectedTags.value.push(customTag.value)
};

const previewImage = (src) => {
  //@ts-ignore
  uni.previewImage({
    urls: [src],
    current: 0,
  });
};

const showRejectConfirm = () => {
  dialogType.value = "error";
  dialogTitle.value = "拒绝审核";
  dialogContent.value = "确定要拒绝该帖子吗？";
  confirmPopup.value.open();
};

const showApproveConfirm = () => {
  if (selectedTags.value.length === 0) {
    toast("请至少选择一个标签", "none");
    return;
  }
  dialogType.value = "success";
  dialogTitle.value = "通过审核";
  dialogContent.value = "确定要通过该帖子吗？";
  confirmPopup.value.open();
};

const showDeleteConfirm = (tagId: number) => {
  dialogType.value = "error";
  dialogTitle.value = "删除标签";
  dialogContent.value = "确定要删除此标签吗？";
  confirmPopup.value.open();
  confirmPopup.value.tagIdToDelete = tagId; // 临时存储要删除的标签ID
};

const handleDeleteTag = (tagId: number) => {
  predefinedTags.value = predefinedTags.value.filter(tag => tag.id !== tagId);
  selectedTags.value = selectedTags.value.filter(tag => tag !== tagId.toString());
  toast("标签已删除", "success");
};

const handleDialogConfirm = (val) => {
  const isApprove = dialogType.value === "success";
  if (isApprove) {
    toast("审核通过", "success");
    handSubmit();
  } else if (dialogType.value === "error" && confirmPopup.value.tagIdToDelete) {
    handleDeleteTag(confirmPopup.value.tagIdToDelete); // 只删除标签
  } else {
    toast("已拒绝", "error");
    const from = {
      postId: postList.value[curIndex.value].id,
      userId: getUserId(),
      label: "",
      message: val
    };
    handFail(from);
  }
  init()
  confirmPopup.value.close();
};

const handleDialogClose = () => {
  confirmPopup.value.tagIdToDelete = null; // 清空临时存储的标签ID
  confirmPopup.value.close();
};
const handlePrevPost = () => {
  if (curIndex.value === 0) {
    toast("已经是第一篇了", "none");
  } else {
    toast("加载上一篇", "none");
    handSelect(curIndex.value - 1)
  }
};

const handleNextPost = () => {
  toast("加载下一篇", "none");
  if (curIndex.value >= postList.value.length - 1) {
    toast("已经是最后一篇了", "none");
  } else {
    toast("加载下一篇", "none")
    handSelect(curIndex.value + 1)
  }
};

const curIndex = ref(0)
const postList = ref([{
  avatar: "/oss/prod/28/headImg/28_1739869924406.png",
  commentNum: null,
  content: "dsadsa",
  file: [{
    id: 0,
    type: "png",
    clientUrl: "/oss/prod/28/28_1739869924406.png",
  }],
  id: 0,
  nickName: "bbm",
  time: null,
  type:"分享生活"
}])

const postPage = {
  page: 1,
  size: 10,
}


const getPostList = () => {
  getUserPostByNoPublic(postPage.page, postPage.size).then(res => {
    console.log(res)
    postList.value = res.data["records"]
  })
}

const handSubmit = () => {
  const FromData = {
    postId: postList.value[curIndex.value].id,
    userId: getUserId(),
    label: selectedTags.value.toString(),
    message: ""
  }
  PostSuccess(FromData).then(res => {
    toast("操作成功", "none")
  })



}

const handFail = (from) => {

  PostFail(from).then(res => {
    toast("操作成功", "none")
  })

}

const handSelect = (index) => {
  curIndex.value = index
}

const init = () => {
  getPostList()
}
init()

</script>

<template>
  <view class="back">
    <view class="page">
      <view class="header">
        <v-icon icon="mdi-chevron-left" class="icon" @click="goManage"></v-icon>
        <view class="title">帖子审核</view>
        <view class="badge">{{ postList.length }}</view>
      </view>

      <scroll-view class="content" scroll-y v-if="postList.length > 0">
        <view class="post-card">
          <view class="user-info">
            <image
                class="avatar"
                :src="baseUrl + postList[curIndex].avatar"
                mode="aspectFill"
            />
            <view class="user-meta">
              <text class="nickname">{{ postList[curIndex]["nickName"] }}</text>
              <text class="time">{{ postList[curIndex]["time"] }}</text>
            </view>
          </view>

          <view class="post-content">
            <text class="text">{{ postList[curIndex]["content"] }}</text>
            <view class="image-list" v-if="postList[curIndex].file.length > 0" v-for="(img, index) in postList[curIndex].file" :key="index">
              <image
                  v-if="img['type'] === 'png' || img.type === 'jpg' || img.type === 'jpeg' || img.type === 'gif' || img.type === 'bmp' || img.type === 'webp'"
                  :src="baseUrl + img['clientUrl']"
                  class="post-image"
                  mode="aspectFill"
                  @click="previewImage(baseUrl + img['clientUrl'])"
              />
              <video
                  v-else
                  :src="baseUrl + img['clientUrl']"
              />
            </view>
          </view>
        </view>

        <view class="tags-section">
          <scroll-view class="tags-scroll">
            <!-- 改为纵向滚动 -->
            <view class="grid-container">
              <!-- 新增网格容器 -->
              <view
                  v-for="tag in predefinedTags"
                  :key="tag.id"
                  class="box"
                  :class="[
                  'tag-item',
                  { 'tag-selected': selectedTags.includes(tag.name) },]"
                  @click="toggleTag(tag.name)"
                  @longpress="showDeleteConfirm(tag.id)"
              >
                {{ tag.name }}
              </view>
            </view>
          </scroll-view>

          <view class="custom-tag">
            <uni-icons class="tag-icon" type="plus" size="16" />
            <input
                class="tag-input"
                v-model="customTag"
                placeholder="自定义标签"
                @blur="addCustomTag"
            />
          </view>
        </view>

        <view class="postList">

          <view class="title">
            <text>帖子列表</text>
          </view>

          <view  class="post" v-for="(index,i) in postList" :key="i" @click="handSelect(i)">
            <view class="postContent">
              <text>{{index.content.substring(0, 10)}}</text>
            </view>

            <view class="post_author_info">
              <image class="avatar" :src="baseUrl + index.avatar" />
              <text>{{index["nickName"]}}</text>
            </view>

          </view>
        </view>
      </scroll-view>

      <view class="null" v-if="postList.length === 0">
        <text>暂时无需要审核的帖子</text>
      </view>

      <view class="action-bar">
        <button class="prev-btn" @click="handlePrevPost">
          <uni-icons type="left" size="16" />
          上一篇
        </button>

        <button class="next-btn" @click="handleNextPost">
          下一篇
          <uni-icons type="right" size="16" />
        </button>

        <button class="reject-btn" @click="showRejectConfirm">拒绝</button>

        <button class="approve-btn" @click="showApproveConfirm">通过</button>
      </view>

      <uni-popup ref="confirmPopup" type="dialog">
        <uni-popup-dialog
            :type="dialogType"
            mode="input"
            :title="dialogTitle"
            :content="dialogContent"
            :before-close="true"
            placeholder="请输入原因"
            value="内容违规!"
            @confirm="handleDialogConfirm"
            @close="handleDialogClose"
        />
      </uni-popup>
    </view>
  </view>
</template>



<style scoped lang="scss">
@use "../../static/css/main";
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.back {
  @include main.useTheme() {
    .null{
      text-align: center;
      margin-top: 200rpx;
      font-size: 14px;
      color: main.getVal("other_lv_text_color");
    }
    .postList{
      .post_author_info{
        .avatar {
          width: 5vw;
          height: 5vw;
        }
        display: flex;
        justify-content: start;
        align-items: end;
      }
      .postContent{
        margin: 2vw 0;
      }
      .post{
        border-bottom: 1px solid main.getVal("primary_border_color");
      }
      .title {

        font-size: 5vw;
      }
      background-color: main.getVal("two_lv_bg_color");
      border-radius: 10rpx;
      padding: 20rpx 20rpx;
    }


    .tags-scroll {
      //height: 200rpx; /* 根据实际需求调整高度（确保能显示2行） */
    }
    .grid-container {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 10rpx;
    }

    .tag-item {
      width: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1rpx solid #ffffff;
      border-radius: 8rpx;
      padding: 12rpx 24rpx;
      background-color: main.getVal("primary_bg_color");
      color: main.getVal("two_lv_text_color");
      font-size: 14px;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      margin: 10rpx;
      white-space: nowrap;
    }

    .page {
      display: flex;
      flex-direction: column;
      height: 100vh;
      background-color: main.getVal("one_lv_bg_color"); // 原色值已修改
    }

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 30rpx;
      background-color: main.getVal("two_lv_bg_color"); // 原#fff改为二级背景
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
      border-bottom: 1rpx solid main.getVal("primary_border_color"); // 新增边
      flex-shrink: 0;
    }
    .icon {
      font-size: 25px;
      color: main.getVal("one_lv_text_color"); // 原#333修改
    }
    .title {
      font-size: 17px;
      font-weight: 500;
      color: main.getVal("primary_text_color"); // 原#333修改
    }

    .badge {
      background-color: #ff4d4f;
      color: #ffffff;
      font-size: 12px;
      padding: 4rpx 16rpx;
      border-radius: 20rpx;
    }
    .content::-webkit-scrollbar {
      display: none;
    }
    .content {
      flex: 1;
      overflow: auto;
      padding: 30rpx;
    }

    .post-card {
      //color: getVal(" other_lv_text_color");
      background-color: main.getVal("two_lv_bg_color");
      border-radius: 16rpx;
      padding: 30rpx;
      margin-bottom: 30rpx;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
    }

    .avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      margin-right: 20rpx;
    }

    .user-meta {
      color: getVal(" other_lv_text_color");
      display: flex;
      flex-direction: column;
    }

    .nickname {
      font-size: 14px;
      color: getVal(" other_lv_text_color");
      font-weight: 500;
      margin-bottom: 4rpx;
    }

    .time {
      font-size: 12px;
      color:getVal("other_lv_text_color"); // 原#999修改
    }

    .post-content {
      margin-top: 20rpx;
    }

    .text {
      font-size: 14px;
      color:getVal("other_lv_text_color");
      line-height: 1.6;
    }

    .image-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 20rpx;
      gap: 20rpx;
    }

    .post-image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 8rpx;
    }

    .tags-section {
      background-color: main.getVal("two_lv_bg_color"); // 原#fff修改
      border-radius: 16rpx;
      padding: 10px;
      margin-bottom: 120rpx;
    }

    .tag-item {
      display: inline-block;
      padding: 12rpx 24rpx;
      margin-right: 20rpx;
      background-color: main.getVal("primary_bg_color");
      color: main.getVal("two_lv_text_color");
      border-radius: 12rpx;
      font-size: 14px;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); // 添加阴影效果
      transition: all 0.3s ease;

    }
    .tag-selected::-webkit-scrollbar {
      display: none;
    }
    .tag-selected {
      background: #FF702E;
      color: #ffffff; // 选中时的文字颜色
      border-color: #FF702E; // 选中时的边框颜色
    }

    .custom-tag {
      margin-top: 10px;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  padding: 12rpx 24rpx;

  .tag-icon {
    margin-right: 10rpx;
    color: #999999;
  }
  .action{
    background: #FF702E;
    color: #FFFFFF;
  }
  .tag-input {
    flex: 1;
    font-size: 14px;
    color: #333333;
    border: none;
    background: transparent;
    outline: none;
  }

  button {
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    margin-left: 0.3125rem;
    background-color: #007aff;
    color: white;
    border: none;
    border-radius: 0.9375rem;
    font-size: 14px;
    cursor: pointer;
  }
}

    .tag-icon {
      margin-right: 10rpx;
      color: #999999;
    }

    .tag-input {
      flex: 1;
      font-size: 14px;
      color: #333333;
    }

    .action-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      padding: 20rpx 30rpx;
      background-color: main.getVal("two_lv_bg_color");
      border-top: 1rpx solid main.getVal("primary_border_color");
      box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
    }

    .prev-btn,
    .next-btn {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #666666;
      background-color: #f5f5f5;
      margin: 0 10rpx;
      padding: 0 20rpx;
      height: 80rpx;
    }

    .reject-btn,
    .approve-btn {
      flex: 1;
      margin: 0 10rpx;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 14px;
      border-radius: 40rpx;
      background-color: main.getVal("pri_color");
    }

    .reject-btn {
      color: white;
      border: 1px solid main.getVal("pri_color");
    }

    .approve-btn {
      background-color: main.getVal("pri_color");
      color: #ffffff;
    }
    padding-bottom: 150rpx;
  }
}
</style>
